<template>
  <div id="doQuestionView">
    <a-row :gutter="[24, 24]">
      <a-col :md="12" :xs="24">
        <a-tabs default-active-key="title">
          <a-tab-pane key="title" title="题目">
            <a-card v-if="question" :title="question.title">
              <a-descriptions
                title="判题条件"
                :column="{ xs: 1, md: 2, lg: 3 }"
              >
                <a-descriptions-item label="时间限制">
                  <a-tag>{{ question.judgeConfig.timeLimit ?? 0 }}</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="内存限制">
                  <a-tag>{{ question.judgeConfig.memoryLimit ?? 0 }}</a-tag>
                </a-descriptions-item>
                <a-descriptions-item label="堆栈限制">
                  <a-tag>{{ question.judgeConfig.stackLimit ?? 0 }}</a-tag>
                </a-descriptions-item>
              </a-descriptions>
              <md-viewer :value="question.content || ''" />
              <template #extra>
                <a-space wrap>
                  <a-tag
                    v-for="(tag, index) of question.tags"
                    :key="index"
                    color="cyan"
                    >{{ tag }}
                  </a-tag>
                </a-space>
              </template>
            </a-card>
          </a-tab-pane>
          <a-tab-pane key="comment" title="评论">
            Content of Tab Panel 2
          </a-tab-pane>
          <a-tab-pane key="answer" title="答案">
            <!--            todo 提交题目之后才可以查看答案-->
            <!--            {{ (question && question.answer) || "" }}-->
            题目提交之后才可查看答案
          </a-tab-pane>
        </a-tabs>
      </a-col>
      <a-col :md="12" :xs="24">
        <a-select
          v-model="form.language"
          :style="{ width: '160px' }"
          placeholder="选择编程语言"
          :trigger-props="{ autoFitPopupMinWidth: true }"
        >
          <a-option disabled="true" :style="{ color: 'blue' }"
            >选择语言
          </a-option>
          <a-option>java</a-option>
          <a-option>cpp</a-option>
          <a-option>go</a-option>
        </a-select>
        <a-divider size="0" />
        <code-editor
          :value="form.code"
          :language="form.language"
          :handleChange="changeCode"
        />
        <a-button
          type="primary"
          shape="round"
          style="min-width: 111px; margin: 10px auto"
          @click="doSubmitQuestion"
          >提交代码
        </a-button>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import { ref, defineProps, withDefaults, onMounted, watch } from "vue";
import {
  QuestionControllerService,
  QuestionSubmitAddRequest,
  QuestionSubmitControllerService,
  QuestionVO,
} from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import CodeEditor from "@/components/CodeEditor.vue";
import MdViewer from "@/components/MdViewer.vue";

const route = useRoute();

interface Props {
  id: string;
}

const props = withDefaults(defineProps<Props>(), {
  id: () => "",
});
const question = ref<QuestionVO>();
const loadData = async () => {
  const result = await QuestionControllerService.getQuestionVoByIdUsingGet(
    props.id as any
  );
  if (result.code === 0) {
    question.value = result.data;
  } else {
    message.error("加载失败，" + result.message);
  }
};
/**
 * 页面加载时请求数据
 */
onMounted(() => {
  loadData();
});
const form = ref<QuestionSubmitAddRequest>({
  language: "java",
  code:
    "import java.nio.file.Paths;\n" +
    "import java.util.ArrayList;\n" +
    "import java.util.List;\n" +
    "import java.util.Scanner; \n" +
    "public class Main {\n" +
    "\n" +
    "    public static void main(String[] args) {\n" +
    "        int a = Integer.parseInt(args[0]);\n" +
    "        int b = Integer.parseInt(args[1]);\n" +
    "        System.out.println(a + b);" +
    "\n    }" +
    "\n}",
});
watch([form.value.language], () => {
  console.log(form.value.language);
});
/**
 * 实时修改form.code变量
 */
const changeCode = (value: string) => {
  form.value.code = value;
};
/**
 * 提交题目
 */
const doSubmitQuestion = async () => {
  if (!question.value?.id) {
    return;
  }
  const result = await QuestionControllerService.doSubmitUsingPost({
    ...form.value,
    questionId: question.value.id,
  });
  if (result.code === 0) {
    message.success("代码提交成功");
  } else {
    message.error("代码提交失败，" + result.message);
  }
};
</script>

<style>
#doQuestionView {
  max-width: 1400px;
  margin: 0 auto;
}

#doQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}
</style>
